<script lang="ts" setup>
  import { computed } from "vue";

  defineOptions({
    name: "umi-card",
  });

  interface CardProps {}

  withDefaults(defineProps<CardProps>(), {});

  const slots = defineSlots();

  const classNames = computed(() => {
    return {
      "umi-card": true,
    };
  });
</script>

<template>
  <div :class="classNames">
    <div class="umi-card-body">
      <slot></slot>
    </div>
    <div class="umi-card-footer" v-if="slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umi-card {
    background-color: #fff;

    &-body {
      padding: 10px;
    }

    &-footer {
      border-top: 1px solid #f2f2f2;
      padding: 10px;
    }
  }
</style>
